React useSyncExternalStore: Làm Chủ Đồng Bộ Hóa Store Bên Ngoài

Trong các ứng dụng React hiện đại, quản lý trạng thái hiệu quả là rất quan trọng. Mặc dù React cung cấp các giải pháp quản lý trạng thái tích hợp sẵn như useState và useReducer, việc tích hợp với các nguồn dữ liệu bên ngoài hoặc thư viện quản lý trạng thái của bên thứ ba đòi hỏi một cách tiếp cận phức tạp hơn. Đây là nơi useSyncExternalStore phát huy tác dụng.

useSyncExternalStore là gì?

useSyncExternalStore là một React hook được giới thiệu trong React 18, cho phép bạn đăng ký và đọc từ các nguồn dữ liệu bên ngoài theo cách tương thích với kết xuất đồng thời. Điều này đặc biệt quan trọng khi xử lý dữ liệu không được quản lý trực tiếp bởi React, chẳng hạn như:

• Thư viện quản lý trạng thái của bên thứ ba: Redux, Zustand, Jotai, v.v.
• API trình duyệt: localStorage, IndexedDB, v.v.
• Nguồn dữ liệu bên ngoài: Các sự kiện được gửi từ máy chủ, WebSockets, v.v.

Trước useSyncExternalStore, việc đồng bộ hóa các store bên ngoài có thể dẫn đến tình trạng xé hình (tearing) và không nhất quán, đặc biệt là với các tính năng kết xuất đồng thời của React. Hook này giải quyết những vấn đề này bằng cách cung cấp một cách tiêu chuẩn và hiệu quả để kết nối dữ liệu bên ngoài với các thành phần React của bạn.

Tại sao nên sử dụng useSyncExternalStore? Lợi ích và Ưu điểm

Sử dụng useSyncExternalStore mang lại một số lợi ích chính:

• An toàn đồng thời: Đảm bảo thành phần của bạn luôn hiển thị một chế độ xem nhất quán về store bên ngoài, ngay cả trong quá trình kết xuất đồng thời. Điều này ngăn ngừa các vấn đề xé hình, trong đó các phần của giao diện người dùng của bạn có thể hiển thị dữ liệu không nhất quán.
• Hiệu suất: Được tối ưu hóa cho hiệu suất, giảm thiểu các lần kết xuất lại không cần thiết. Nó tận dụng các cơ chế bên trong của React để đăng ký thay đổi một cách hiệu quả và chỉ cập nhật thành phần khi cần thiết.
• API tiêu chuẩn: Cung cấp một API nhất quán và có thể đoán trước để tương tác với các store bên ngoài, bất kể triển khai cơ bản.
• Giảm Boilerplate: Đơn giản hóa quy trình kết nối với các store bên ngoài, giảm lượng mã tùy chỉnh bạn cần viết.
• Khả năng tương thích: Hoạt động liền mạch với nhiều nguồn dữ liệu bên ngoài và thư viện quản lý trạng thái.

Cách useSyncExternalStore Hoạt động: Tìm Hiểu Sâu

Hook useSyncExternalStore nhận ba đối số:

1. subscribe(callback: () => void): () => void: Một hàm đăng ký một callback để được thông báo khi store bên ngoài thay đổi. Nó sẽ trả về một hàm để hủy đăng ký. Đây là cách React biết khi store có dữ liệu mới.
2. getSnapshot(): T: Một hàm trả về một snapshot của dữ liệu từ store bên ngoài. Snapshot này phải là một giá trị đơn giản, bất biến mà React có thể sử dụng để xác định xem dữ liệu có thay đổi hay không.
3. getServerSnapshot?(): T (Tùy chọn): Một hàm trả về snapshot ban đầu của dữ liệu trên máy chủ. Điều này được sử dụng để kết xuất phía máy chủ (SSR) để đảm bảo tính nhất quán giữa máy chủ và máy khách. Nếu không được cung cấp, React sẽ sử dụng getSnapshot() trong quá trình kết xuất máy chủ, điều này có thể không lý tưởng cho tất cả các trường hợp.

Dưới đây là phân tích về cách các đối số này hoạt động cùng nhau:

1. Khi thành phần được gắn kết, useSyncExternalStore gọi hàm subscribe để đăng ký một callback.
2. Khi store bên ngoài thay đổi, nó gọi callback đã đăng ký thông qua subscribe.
3. Callback báo cho React biết rằng thành phần cần được kết xuất lại.
4. Trong quá trình kết xuất, useSyncExternalStore gọi getSnapshot để lấy dữ liệu mới nhất từ store bên ngoài.
5. React so sánh snapshot hiện tại với snapshot trước đó. Nếu chúng khác nhau, thành phần sẽ được cập nhật với dữ liệu mới.
6. Khi thành phần được gỡ gắn kết, hàm hủy đăng ký được trả về bởi subscribe sẽ được gọi để ngăn ngừa rò rỉ bộ nhớ.

Ví dụ Triển Khai Cơ Bản: Tích hợp với localStorage

Hãy minh họa cách sử dụng useSyncExternalStore với một ví dụ đơn giản: đọc và ghi một giá trị vào localStorage.

            import { useSyncExternalStore } from 'react';

function getLocalStorageItem(key: string): string | null {
  try {
    return localStorage.getItem(key);
  } catch (error) {
    console.error("Error accessing localStorage:", error);
    return null; // Handle potential errors like `localStorage` being unavailable.
  }
}

function useLocalStorage(key: string): [string | null, (value: string) => void] {
  const subscribe = (callback: () => void) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const getSnapshot = () => getLocalStorageItem(key);

  const serverSnapshot = () => null; // Or a default value if appropriate for your SSR setup

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  const setValue = (newValue: string) => {
    try {
      localStorage.setItem(key, newValue);
      // Dispatch a storage event on the current window to trigger updates in other tabs.
      window.dispatchEvent(new StorageEvent('storage', {
        key: key,
        newValue: newValue,
        storageArea: localStorage,
      } as StorageEventInit));
    } catch (error) {
      console.error("Error setting localStorage:", error);
    }
  };

  return [value, setValue];
}

function MyComponent() {
  const [name, setName] = useLocalStorage('name');

  return (
    <div>
      <p>Hello, {name || 'World'}</p>
      <input
        type="text"
        value={name || ''}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default MyComponent;
            

              
                Copy
              
            
          

Giải thích:

• getLocalStorageItem: Một hàm trợ giúp để truy xuất giá trị một cách an toàn từ localStorage, xử lý các lỗi tiềm ẩn.
• useLocalStorage: Một hook tùy chỉnh đóng gói logic để tương tác với localStorage bằng useSyncExternalStore.
• subscribe: Lắng nghe sự kiện 'storage', được kích hoạt khi localStorage được sửa đổi trong một tab hoặc cửa sổ khác. Quan trọng, chúng ta gửi một sự kiện lưu trữ sau khi thiết lập một giá trị mới để kích hoạt chính xác các bản cập nhật trong *cùng* một cửa sổ.
• getSnapshot: Trả về giá trị hiện tại từ localStorage.
• serverSnapshot: Trả về null (hoặc một giá trị mặc định) cho kết xuất phía máy chủ.
• setValue: Cập nhật giá trị trong localStorage và gửi một sự kiện lưu trữ để báo hiệu cho các tab khác.
• MyComponent: Một thành phần đơn giản sử dụng hook useLocalStorage để hiển thị và cập nhật tên.

Cân nhắc quan trọng đối với localStorage:

• Xử lý lỗi: Luôn bọc quyền truy cập localStorage trong các khối try...catch để xử lý các lỗi tiềm ẩn, chẳng hạn như khi localStorage bị tắt hoặc không khả dụng (ví dụ: trong chế độ duyệt web riêng tư).
• Sự kiện lưu trữ: Sự kiện 'storage' chỉ được kích hoạt khi localStorage được sửa đổi trong một tab hoặc cửa sổ *khác*, không phải trong cùng một cửa sổ. Do đó, chúng ta gửi một StorageEvent mới theo cách thủ công sau khi thiết lập một giá trị.
• Tuần tự hóa dữ liệu: localStorage chỉ lưu trữ chuỗi. Bạn có thể cần tuần tự hóa và giải tuần tự hóa các cấu trúc dữ liệu phức tạp bằng cách sử dụng JSON.stringify và JSON.parse.
• Bảo mật: Hãy chú ý đến dữ liệu bạn lưu trữ trong localStorage, vì nó có thể truy cập được vào mã JavaScript trên cùng một miền. Thông tin nhạy cảm không nên được lưu trữ trong localStorage.

Các Trường Hợp Sử Dụng và Ví Dụ Nâng Cao

1. Tích hợp với Zustand (hoặc thư viện quản lý trạng thái khác)

            import { useSyncExternalStore } from 'react';
import { create } from 'zustand';

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useStore = create<BearState>((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by }))
}))

function BearCounter() {
  const bears = useSyncExternalStore(
    useStore.subscribe,
    useStore.getState,
    () => ({ bears: 0, increase: () => {} }) // Server snapshot, provide default state
  ).bears
  return <h1>{bears} bears around here!</h1>
}

function Controls() {
  const increase = useStore(state => state.increase)
  return (<button onClick={() => increase(1)}>one bear</button>)
}

export { BearCounter, Controls }
            

              
                Copy
              
            
          

Giải thích:

• Chúng ta đang sử dụng Zustand để quản lý trạng thái toàn cục
• useStore.subscribe: Hàm này đăng ký vào store Zustand và sẽ kích hoạt kết xuất lại khi trạng thái của store thay đổi.
• useStore.getState: Hàm này trả về trạng thái hiện tại của store Zustand.
• Tham số thứ ba cung cấp trạng thái mặc định cho kết xuất phía máy chủ (SSR), đảm bảo rằng thành phần kết xuất chính xác trên máy chủ trước khi JavaScript phía máy khách tiếp quản.
• Thành phần nhận số lượng bears bằng cách sử dụng useSyncExternalStore và kết xuất nó.
• Thành phần Controls hiển thị cách sử dụng một setter Zustand.

2. Tích hợp với Các Sự Kiện Được Gửi Từ Máy Chủ (SSE)

useSyncExternalStore có thể được sử dụng để cập nhật hiệu quả các thành phần dựa trên dữ liệu thời gian thực từ một máy chủ bằng cách sử dụng Các Sự Kiện Được Gửi Từ Máy Chủ (SSE).

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

function useSSE(url: string) {
  const [data, setData] = useState<any>(null);
  const [eventSource, setEventSource] = useState<EventSource | null>(null);

  useEffect(() => {
    const newEventSource = new EventSource(url);
    setEventSource(newEventSource);

    newEventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data);
        setData(parsedData);
      } catch (error) {
        console.error("Error parsing SSE data:", error);
      }
    };

    newEventSource.onerror = (error) => {
      console.error("SSE error:", error);
    };

    return () => {
      newEventSource.close();
      setEventSource(null);
    };
  }, [url]);

  const subscribe = useCallback((callback: () => void) => {
    if (eventSource) {
      eventSource.addEventListener('message', callback);
    }
    return () => {
      if (eventSource) {
        eventSource.removeEventListener('message', callback);
      }
    };
  }, [eventSource]);

  const getSnapshot = useCallback(() => data, [data]);

  const serverSnapshot = useCallback(() => null, []);

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return value;
}

function RealTimeDataComponent() {
  const realTimeData = useSSE('/api/sse'); // Replace with your SSE endpoint

  if (!realTimeData) {
    return <p>Loading...</p>;
  }

  return <div><p>Real-time Data: {JSON.stringify(realTimeData)}</p></div>;
}

export default RealTimeDataComponent;
            

              
                Copy
              
            
          

Giải thích:

• useSSE: Một hook tùy chỉnh thiết lập một kết nối SSE đến một URL đã cho.
• subscribe: Thêm một trình lắng nghe sự kiện vào đối tượng EventSource để được thông báo về các thông báo mới từ máy chủ. Nó sử dụng useCallback để đảm bảo rằng hàm callback không được tạo lại trên mỗi lần kết xuất.
• getSnapshot: Trả về dữ liệu nhận được gần đây nhất từ luồng SSE.
• serverSnapshot: Trả về null cho kết xuất phía máy chủ.
• RealTimeDataComponent: Một thành phần sử dụng hook useSSE để hiển thị dữ liệu thời gian thực.

3. Tích hợp với IndexedDB

Đồng bộ hóa các thành phần React với dữ liệu được lưu trữ trong IndexedDB bằng cách sử dụng useSyncExternalStore.

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

interface IDBData {
  id: number;
  name: string;
}

async function getAllData(): Promise {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDataBase', 1); // Replace with your database name and version

    request.onerror = (event) => {
      console.error("IndexedDB open error:", event);
      reject(event);
    };

    request.onsuccess = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      const transaction = db.transaction(['myDataStore'], 'readonly'); // Replace with your store name
      const objectStore = transaction.objectStore('myDataStore');
      const getAllRequest = objectStore.getAll();

      getAllRequest.onsuccess = (event) => {
        const data = (event.target as IDBRequest).result as IDBData[];
        resolve(data);
      };

      getAllRequest.onerror = (event) => {
        console.error("IndexedDB getAll error:", event);
        reject(event);
      };
    };

    request.onupgradeneeded = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      db.createObjectStore('myDataStore', { keyPath: 'id' });
    };
  });
}

function useIndexedDBData(): IDBData[] | null {
  const [data, setData] = useState(null);
  const [dbInitialized, setDbInitialized] = useState(false);

  useEffect(() => {
    const initDB = async () => {
        try{
            await getAllData();
            setDbInitialized(true);
        } catch (e) {
            console.error("IndexedDB initialization failed", e);
        }
    }

    initDB();
  }, []);


  const subscribe = useCallback((callback: () => void) => {
    // Debounce the callback to prevent excessive re-renders.
    let timeoutId: NodeJS.Timeout;
    const debouncedCallback = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(callback, 50); // Adjust the debounce delay as needed
    };

    const handleVisibilityChange = () => {
      // Re-fetch data when the tab becomes visible again
      if (document.visibilityState === 'visible') {
        debouncedCallback();
      }
    };

    window.addEventListener('focus', debouncedCallback);
    document.addEventListener('visibilitychange', handleVisibilityChange);


    return () => {
      window.removeEventListener('focus', debouncedCallback);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      clearTimeout(timeoutId);
    };
  }, []);

  const getSnapshot = useCallback(() => {
    // Fetch the latest data from IndexedDB every time getSnapshot is called
    getAllData().then(newData => setData(newData));
    return data;
  }, [data]);

  const serverSnapshot = useCallback(() => null, []);

  return useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);
}

function IndexedDBComponent() {
  const data = useIndexedDBData();

  if (!data) {
    return <p>Loading data from IndexedDB...</p>;
  }

  return (
    <div>
      <h2>Data from IndexedDB:</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name} (ID: {item.id})</li>
        ))}
      </ul>
    </div>
  );
}

export default IndexedDBComponent;
            

              
                Copy
              
            
          

Giải thích:

• getAllData: Một hàm không đồng bộ truy xuất tất cả dữ liệu từ store IndexedDB.
• useIndexedDBData: Một hook tùy chỉnh sử dụng useSyncExternalStore để đăng ký các thay đổi trong IndexedDB.
• subscribe: Thiết lập các trình lắng nghe cho các thay đổi về khả năng hiển thị và tiêu điểm để cập nhật dữ liệu từ IndexedDB và sử dụng một hàm debounce để tránh các bản cập nhật quá mức.
• getSnapshot: Tìm nạp snapshot hiện tại bằng cách gọi `getAllData()` và sau đó trả về `data` từ trạng thái.
• serverSnapshot: Trả về null cho kết xuất phía máy chủ.
• IndexedDBComponent: Một thành phần hiển thị dữ liệu từ IndexedDB.

Cân nhắc quan trọng đối với IndexedDB:

• Các Thao Tác Không Đồng Bộ: Các tương tác với IndexedDB là không đồng bộ, vì vậy bạn cần xử lý cẩn thận bản chất không đồng bộ của việc truy xuất và cập nhật dữ liệu.
• Xử Lý Lỗi: Triển khai xử lý lỗi mạnh mẽ để xử lý một cách duyên dáng các vấn đề tiềm ẩn với quyền truy cập cơ sở dữ liệu, chẳng hạn như cơ sở dữ liệu không tìm thấy hoặc lỗi quyền.
• Kiểm Soát Phiên Bản Cơ Sở Dữ Liệu: Quản lý cẩn thận các phiên bản cơ sở dữ liệu bằng cách sử dụng sự kiện onupgradeneeded để đảm bảo khả năng tương thích dữ liệu khi ứng dụng của bạn phát triển.
• Hiệu Suất: Các thao tác IndexedDB có thể tương đối chậm, đặc biệt đối với các tập dữ liệu lớn. Tối ưu hóa các truy vấn và lập chỉ mục để cải thiện hiệu suất.

Cân nhắc về Hiệu suất

• Giảm thiểu thay đổi Snapshot: Đảm bảo rằng hàm getSnapshot chỉ trả về một snapshot mới khi dữ liệu thực sự đã thay đổi. Tránh tạo các đối tượng hoặc mảng mới một cách không cần thiết. Cân nhắc sử dụng các kỹ thuật ghi nhớ để tối ưu hóa việc tạo snapshot.
• Cập nhật hàng loạt: Nếu có thể, hãy cập nhật hàng loạt store bên ngoài để giảm số lần kết xuất lại. Ví dụ: nếu bạn đang cập nhật nhiều thuộc tính trong store, hãy cố gắng cập nhật tất cả chúng trong một giao dịch duy nhất.
• Debouncing/Throttling: Nếu store bên ngoài thay đổi thường xuyên, hãy cân nhắc việc debouncing hoặc throttling các bản cập nhật cho thành phần React. Điều này có thể ngăn ngừa các lần kết xuất lại quá mức và cải thiện hiệu suất. Điều này đặc biệt hữu ích với các store dễ bay hơi như thay đổi kích thước cửa sổ trình duyệt.
• So sánh nông: Đảm bảo rằng bạn trả về các giá trị nguyên thủy hoặc các đối tượng bất biến trong getSnapshot để React có thể nhanh chóng xác định xem dữ liệu có thay đổi hay không bằng cách sử dụng so sánh nông.
• Cập nhật có điều kiện: Trong trường hợp store bên ngoài thay đổi thường xuyên nhưng thành phần của bạn chỉ cần phản ứng với một số thay đổi nhất định, hãy cân nhắc việc triển khai các bản cập nhật có điều kiện trong hàm `subscribe` để tránh các lần kết xuất lại không cần thiết.

Các Cạm Bẫy Phổ Biến và Khắc Phục Sự Cố

• Các Vấn Đề về Xé Hình: Nếu bạn vẫn gặp phải các vấn đề về xé hình sau khi sử dụng useSyncExternalStore, hãy kiểm tra kỹ xem hàm getSnapshot của bạn có trả về một chế độ xem nhất quán về dữ liệu hay không và hàm subscribe có thông báo chính xác cho React về các thay đổi hay không. Đảm bảo rằng bạn không đột biến dữ liệu trực tiếp trong hàm getSnapshot.
• Vòng Lặp Vô Hạn: Vòng lặp vô hạn có thể xảy ra nếu hàm getSnapshot luôn trả về một giá trị mới, ngay cả khi dữ liệu không thay đổi. Điều này có thể xảy ra nếu bạn đang tạo các đối tượng hoặc mảng mới một cách không cần thiết. Đảm bảo rằng bạn đang trả về cùng một giá trị nếu dữ liệu không thay đổi.
• Thiếu Kết Xuất Phía Máy Chủ: Nếu bạn đang sử dụng kết xuất phía máy chủ, hãy đảm bảo cung cấp một hàm getServerSnapshot để đảm bảo rằng thành phần kết xuất chính xác trên máy chủ. Hàm này sẽ trả về trạng thái ban đầu của store bên ngoài.
• Hủy Đăng Ký Không Chính Xác: Luôn đảm bảo bạn hủy đăng ký chính xác khỏi store bên ngoài trong hàm được trả về bởi subscribe. Việc không làm như vậy có thể dẫn đến rò rỉ bộ nhớ.
• Sử Dụng Không Chính Xác với Chế Độ Đồng Thời: Đảm bảo store bên ngoài của bạn tương thích với Chế Độ Đồng Thời. Tránh thực hiện các đột biến đối với store bên ngoài trong khi React đang kết xuất. Các đột biến phải đồng bộ và có thể đoán trước.

Kết luận

useSyncExternalStore là một công cụ mạnh mẽ để đồng bộ hóa các thành phần React với các store dữ liệu bên ngoài. Bằng cách hiểu cách nó hoạt động và tuân theo các phương pháp hay nhất, bạn có thể đảm bảo rằng các thành phần của bạn hiển thị dữ liệu nhất quán và cập nhật, ngay cả trong các tình huống kết xuất đồng thời phức tạp. Hook này đơn giản hóa việc tích hợp với nhiều nguồn dữ liệu khác nhau, từ các thư viện quản lý trạng thái của bên thứ ba đến các API trình duyệt và luồng dữ liệu thời gian thực, dẫn đến các ứng dụng React mạnh mẽ và hiệu quả hơn. Hãy nhớ luôn xử lý các lỗi tiềm ẩn, tối ưu hóa hiệu suất và quản lý cẩn thận các đăng ký để tránh các cạm bẫy phổ biến.